<section class="content-header">
    <h1>
        CSS生产监控
        <small> {{dateTime|date:"yyyy-MM-dd HH:mm:ss"}}</small>
    </h1>
</section>
<section class="content">
    <div class="row">
        <!-- <div class="col-lg-3 col-xs-6">
            <div class="small-box bg-primary">
                <div class="inner">
                    <h3>CSS生产监控</h3>
                    <p>{{dateTime|date:"yyyy-MM-dd HH:mm:ss"}}</p>
                </div>
                <div class="icon">
                    <i class="fa fa-plus text-green"></i>
                </div>
            </div>

        </div> -->
        <div class="col-lg-3 col-xs-6">
            <!-- small box -->
            <div class="small-box bg-aqua">
                <div class="inner">
                    <h3>150</h3>
                    <p>计划产量</p>
                </div>
                <div class="icon">
                    <i class="ion ion-bag"></i>
                </div>
            </div>
        </div>
        <!-- ./col -->
        <div class="col-lg-3 col-xs-6">
            <!-- small box -->
            <div class="small-box bg-green">
                <div class="inner">
                    <h3>53<sup style="font-size: 20px">%</sup></h3>

                    <p>实际产量</p>
                </div>
                <div class="icon">
                    <i class="ion ion-stats-bars"></i>
                </div>
            </div>
        </div>
        <!-- ./col -->
        <div class="col-lg-3 col-xs-6">
            <!-- small box -->
            <div class="small-box bg-yellow">
                <div class="inner">
                    <h3>44</h3>
                    <p>停线时间</p>
                </div>
                <div class="icon">
                    <i class="ion ion-person-add"></i>
                </div>
            </div>
        </div>
        <div class="col-lg-3 col-xs-6 ">
            <i class="fa fa-plus text-green pull-right" style="font-size:100px"></i>
        </div>
        <!-- ./col -->

        <!-- ./col -->
    </div>
    <div class="row">
        <div class="col-xs-12">
            <!-- <div class="box box-default">
                <div class="box-header with-border">
                    <div class="pull-right">
                        <h5>{{dateTime|date:"yyyy-MM-dd HH:mm:ss"}} <i class="fa fa-university"></i></h5>
                    </div>
                    <i class="fa fa-university"></i>
                    <div class="box-title">
                        CSS生产监控
                    </div>
                </div>
                <div class="box-body" style="background-color: #D9DFE6"> -->
            <div class="row">
                <div *ngFor="let hero of heroes" class="col-lg-4">
                    <div class="box box-success ">
                        <div class="box-header with-border">
                            <div class="pull-right">
                                {{hero.shiftDay}}&nbsp;&nbsp;&nbsp;&nbsp;{{hero.shiftName}}
                            </div>
                            <!-- /. tools -->

                            <i class="fa fa-map-marker"></i>

                            <h3 class="box-title">
                                {{hero.fullName}}
                            </h3>
                        </div>
                        <div>
                            <div class="row">
                                <div class="col-xs-6 text-center" style="border-right: 2px solid #f4f4f4">
                                    <div class="knob-label">
                                        <h1 class="text-info" style="font-weight:bold">123</h1>
                                    </div>
                                    <div class="knob-label">
                                        <h5>上线</h5>
                                    </div>
                                </div>
                                <!-- ./col -->
                                <div class="col-xs-6 text-center">
                                    <div class="knob-label">
                                        <h1 class="text-primary" style="font-weight:bold">88</h1>
                                    </div>
                                    <div class="knob-label">
                                        <h5>下线</h5>
                                    </div>
                                </div>
                                <!-- ./col -->
                            </div>
                            <div class="row">
                                <div class="col-xs-12">
                                    <ul class="products-list product-list-in-box">
                                        <li class="item" style="border-top: 1px solid #f4f4f4;">
                                            <div class="product-img">
                                                &nbsp;&nbsp;<a class="btn btn-social-icon btn-sm btn-info"><i class="fa fa-phone"></i></a>
                                            </div>
                                            <div class="product-info">
                                                <span class="product-description">
                                                        <h5>88 </h5>
                                                    </span>
                                            </div>
                                        </li>
                                        <li class="item" style="border-top: 1px solid #f4f4f4;">
                                            <div class="product-img">
                                                &nbsp;&nbsp;<a class="btn btn-social-icon btn-sm btn-danger"><i class="fa fa-bell-o"></i></a>
                                            </div>
                                            <div class="product-info">
                                                <span class="product-description">
                                                          <h5>26" Mongoose Dolomite Men's </h5>
                                                    </span>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- </div>
            </div> -->
        </div>
    </div>
    <!-- /.row -->
    <!-- Main row -->

    <!-- /.row (main row) -->

</section>